<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../commn/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/weui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/jquery-weui.min.css" />
		<link rel="stylesheet" type="text/css" href="../Hui-iconfont/1.0.8/iconfont.css" />
		<style type="text/css">
			body {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				width: 100%;
			}
			
			.index {
				min-width: 240px;
			}
			
			.top {
				display: -webkit-box;
				width: 100%;
				height: 40px;
				background-color: #0F88EB;
			}
			
			.top>span {
				line-height: 40px;
				text-indent: 1em;
				color: white;
				display: -webkit-box;
				font-size: 18px;
				font-weight: bold;
				-webkit-box-flex: 1;
			}
			
			.back {
				color: white;
				font-size: 18px;
				margin-left: 15px;
				line-height: 40px;
			}
			
			.content {
				margin: 3px;
				height: 300px;
				outline: none;
			}
			
			.photo {
				height: 80px;
				position: relative;
			}
			
			.photo>img {
				width: 60px;
				height: 60px;
				border-radius: 50px;
				overflow: hidden;
				position: absolute;
				top: 50%;
				left: 50%;
				border: 1px solid #EEEEEE;
				-webkit-transform: translateX(-50%) translateY(-50%);
			}
			
			.btn_g {
				background-color: #0F88EB;
				color: white;
				width: 80%;
				height: 40px;
				border-radius: 5px;
				outline: none;
				margin-top: 5px;
				border: 1px solid #0F88EB;
			}
			
			.kuang {
				width: 80%;
				text-indent: 2em;
				height: 40px;
				font-weight: bold;
				outline: none;
				border: none;
				border-bottom: 2px solid #0F88EB;
			}
			
			.kk p {
				color: #999999;
				width: 100%;
				height: 50px;
				margin: 0px auto;
			}
			.kk>div:nth-child(1)>p,.kk>div:nth-child(2)>p{
				margin-left: 10%;
			}
			.anjian {
				text-align: center;
				margin-top: 30px;
			}
			
			.none {
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="index">
			<div class="top">
				<a href="../zhihu_more/more.html" class="back Hui-iconfont Hui-iconfont-slider-left"></a>
				<span>个人资料</span>
			</div>
			<div class="content">
				<div class="photo">
					<img src="../common/img/1.jpg" />
				</div>
				<div class="kk">
					<div  :class="{none:isnone}">
						<p class="">用户名：<span v-html="name"></span></p>
						<p class="">昵称：<span v-html="nc"></span></p>
						<p class="">邮箱：<span v-html="yx"></span></p>
						<p class="">介绍：<span v-html="on"></span></p>
						<p class="">电话：<span v-html="tel"></span></p>
					</div>
					<div :class="{none:!isnone}">
						<p class=""><input type="text" class="kuang" v-model="nicheng" placeholder="要修改的昵称"></p>
						<p class=""><input type="text" class="kuang" v-model="email" placeholder="要修改的email"></p>
						<p class=""><input type="text" class="kuang" v-model="one" placeholder="一句话介绍自己"></p>
						<p class=""><input type="text" class="kuang" v-model="phone" placeholder="要修改的手机号"></p>

					</div>
					<div class="anjian">
						<p><input type="button" name="" class="btn_g" value="编辑资料" @click="ziliao()" /></p>
						<p><input type="button" name="" class="btn_g" value="确认修改" @click="xiugai()" /></p>
						<p><input type="button" name="" class="btn_g" value="退出登录" @click="tuichu()" /></p>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var newVue = new Vue({
				el: "body",
				data: {
					nicheng: "",
					email: "",
					phone: "",
					one: "",
					isnone: false,
					name: sessionStorage.getItem('name'),
					nc: sessionStorage.getItem('nicheng'),
					yx: sessionStorage.getItem('email'),
					on: sessionStorage.getItem('one'),
					tel: sessionStorage.getItem('phone'),

				},
				methods: {
					xiugai: function() {
						xg(this.phone, this.one, this.nicheng, this.email, this.name)
						sessionStorage.setItem('nicheng', this.nicheng);
						sessionStorage.setItem('email', this.email);
						sessionStorage.setItem('phone', this.phone);
						sessionStorage.setItem('one', this.one);
						this.isnone = false
						location.reload()
						alert("修改成功")
						
					},
					tuichu: function() {
						tuic()
					},
					ziliao: function() {
						this.isnone = true
					}

				}
			})

			function xg(phone, one, nicheng, email, name) {
				console.log(phone, one, nicheng, email, name)
				var ss;
				var dd;
				$.ajax({
					type: 'get',
					//async:false,
					url: "http://v2.mashupcloud.cn/developer/auth.do",
					data: {
						appkey: 'FvWrIYOQoTUYVbscUNQoQAVqsLnZqKEN',
						appsecret: 'ugCfcSmyLkcbCGfIuFOPEgTgPQPbyJSE'

					},
					success: function(json) {
						//		            console.log(json);
						ss = JSON.parse(json)[1];
						dd = JSON.parse(json)[2];
						console.log('获得token成功');
						$.ajax({
							type: 'get',
							url: "http://v2.mashupcloud.cn/SQL/upda_user/",
							data: {
								appid: dd,
								token: ss,
								name: 'upda_user',
								_v1: nicheng,
								_v2: email,
								_v3: one,
								_v4: phone,
								_v5: name
							},
							success: function(json) {
								console.log(JSON.parse(json));
							},
							error: function(json) {
								console.log("err:" + json);
							}
						});
					},
					error: function(json) {
						console.log("err:" + json);
					}
				});
			};

			function tuic() {
				sessionStorage.removeItem('id');
				sessionStorage.removeItem('nicheng');
				sessionStorage.removeItem('email');
				alert('退出成功');
				location.href = '../zhihu_index/index.html';
			}
		</script>
	</body>

</html>